import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

import AutoImport from "unplugin-auto-import/vite";

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

import vueJsx from "@vitejs/plugin-vue-jsx";

import UnoCSS from "unocss/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      //自动引入
      imports: ["vue", "vue-router", "pinia"],
      dts: "src/types/auto-import.d.ts", // 路径下自动生成文件夹存放全局指令
    }),
    //svg插件-主要插入部分
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], //可能会出现‘process is not defined’报错，但并不影响
      // 指定symbolId格式
      symbolId: "icon-[dir]-[name]",
    }),
    vueJsx({
      transformOn: true,
      mergeProps: true,
    }),
    UnoCSS(),
  ],
  // 代理
  server: {
    host: "0.0.0.0",
    port: 3000,
    // proxy: {
    //   // 代理所有 /api 的请求，该求情将被代理到 target 中
    //   '/api': {
    //     // 代理请求之后的请求地址（你的真实接口地址)
    //     target: 'http://192.168.1.99/',
    //     // 跨域
    //     changeOrigin: true
    //   }
    // }
  },
  resolve: {
    // Vite路径别名配置
    alias: {
      "@": path.resolve("./src"),
    },
  },
  /*主要看下面这段*/
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/styles/constant.scss";',
      },
    },
  },
  // chainWebpack:config=>{
  //   // svg图标加载
  //   config.module
  //     .rule('svg')
  //     .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
  //     .end()

  //   config.module
  //     .rule('icons')// 定义一个名叫 icons 的规则
  //     .test(/\.svg$/)// 设置 icons 的匹配正则
  //     .include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
  //     .end()
  //     .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
  //     .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
  //     .options({// 该 svg-sprite-loader 的配置
  //       symbolId:'icon-[name]'
  //     })
  //     .end()
  // },
});
